<template>
  <div class="clearFix echa wrap">
    <h2 style="text-align: center;font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;">全国城市数据量监测一览表</h2>
    <div class="cityld">
      <label>省份：</label>
      <select v-model="proId" style="width: 100px; height: 26px;" @change="changePro()" ref="proname">
        <option v-for="item in allpro" :key="item.id" v-bind:value="item.cityId">{{item.cityName}}</option>
      </select>
      <label>市级：</label>
      <select v-model="cityId" style="width: 100px; height: 26px;" @change="changeCity(cityId)" ref="cityname">
        <option v-for="item in allcity" :key="item.id" v-bind:value="item.cityId">{{item.cityName}}</option>
      </select>
      <label>时间：</label>
      <select v-model="year" @change="changeS()" style="width: 100px; height: 26px;">
        <option v-for="item in years" :key="item.id" v-bind:value="item">{{item}}</option>
      </select>
    </div>
    <div style="margin-top: 25px;border: 1px solid rgba(0,0,0,0);box-shadow: #f1f1f1 0 0 10px 5px;height: 500px;width: 100%;box-sizing: content-box">
      <div id='citybbg' style="width:1160px;height: 500px;box-sizing: content-box"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      proId: '11',
      cityId: '110101',
      proname: '',
      allpro: [],
      cityname: '',
      allcity: [],
      citybbg: '',
      options: {},
      year: '',
      years: [],
      data1: [],
      data2: []
    }
  },
  mounted () {
    this.year = new Date().getFullYear()
    this.nowyear = this.year
    this.years = [this.year, this.year - 1, this.year - 2]
    this.initProCity()
    this.findpro().then((data) => {
      this.proname = data[0].cityName
      this.proId = data[0].cityId
      this.allpro = data
      this.findCity().then((data) => {
        this.cityname = data[0].cityName || this.proname
        this.cityId = data[0].cityId
        this.allcity = data || []
        this.getdata(this.year)
      })
    })
  },
  methods: {
    // 点击省份
    changePro () {
      this.proname = this.$refs.proname.options[this.$refs.proname.selectedIndex].text
      this.findCity(this.proId).then(data => {
        this.cityname = data[0].cityName || this.proname
        this.cityId = data[0].cityId
        this.allcity = data
        this.getdata(this.year)
      }).catch(data => {
        this.cityname = this.proname
        this.allcity = []
      })
    },
    // 点击省份
    changeCity () {
      this.cityname = this.$refs.cityname.options[this.$refs.cityname.selectedIndex].text
      this.getdata(this.year)
    },
    changeS () {
      this.getdata()
    },
    initProCity () {
      var self = this
      this.citybbg = window.echarts.init(document.getElementById('citybbg'))
      // 显示标题，图例和空的坐标轴
      this.citybbg.setOption({
        // backgroundColor: '#0f375f',
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var relVal = params[0].name + '数据量<br/>'
            relVal += self.proname + ' : ' + params[0].value + '<br/>'
            relVal += self.cityname + ' : ' + params[1].value + '<br/>'
            return relVal
          }
        },
        legend: {
          data: ['line', 'bar'],
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        textStyle: {
          color: '#000'
        },
        series: [{
          name: '省',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 15,
          data: []

        }, {
          name: '市',
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new window.echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FA8072'
                },
                {
                  offset: 1,
                  color: '#C0FF3E'
                }
                ]
              )
            }
          },
          data: []
        },
        {
          // name: 'xx',
          type: 'bar',
          barGap: '-100%',
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new window.echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(20,200,212,0.5)'
                },
                {
                  offset: 0.2,
                  color: 'rgba(20,200,212,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(20,200,212,0)'
                }
                ]
              )
            }
          },
          z: -12,
          data: []
        },
        {
          // name: 'aa',
          type: 'pictorialBar',
          symbol: 'rect',
          itemStyle: {
            normal: {
              color: '#EE7600'
            }
          },
          symbolRepeat: true,
          symbolSize: [12, 4],
          symbolMargin: 1,
          z: -10,
          data: []
        }]
      })
    },
    findpro () {
      var self = this
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findsheng.do?cityId=10007').then(function (res) {
          resolve(res.data)
        })
      })
    },
    findCity (id) {
      var self = this
      var grade = id || 11
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findnext.do?grade=' + grade).then(function (res) {
          resolve(res.data)
        }).catch(function (res) {
          resolve(res.data)
        })
      })
    },
    getdata () {
      var self = this
      self.axios.post(self.api + '/monitor/dataCleanController/findCityNetDetect.do', self.qs.stringify({type: 0, locName: self.proname, year: self.year})).then(function (res) {
        if (res.data.msg === 'success') {
          self.data1 = []
          res.data.data.map(function (item) {
            self.data1.push(item.count)
          })
          self.axios.post(self.api + '/monitor/dataCleanController/findCityNetDetect.do', self.qs.stringify({type: 1, locName: self.cityname, year: self.year})).then(function (res) {
            if (res.data.msg === 'success') {
              self.data2 = []
              res.data.data.map(function (item) {
                self.data2.push(item.count)
              })
              self.citybbg.setOption({
                series: [
                  {data: self.data1},
                  {data: self.data2},
                  {data: self.data1},
                  {data: self.data1}
                ]
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="" scoped>
  .zhishuRank{
    margin-top: 40px;
    border: 1px solid rgba(0,0,0,0);
    box-shadow: #f1f1f1 0 0 10px 5px;
    height: 575px;
    padding: 40px 20px 20px;
  }
  .huoyueTitle{
    display: inline-block;
    font-size: 20px;
    padding-bottom: 10px;
    color: #e81d1d;
    border-bottom: 2px solid #e81d1d;
  }
  .zhishuRank .table{
    margin-top: 50px;
  }
  .zhishuRank .table table thead th{
    font-size: 16px;
    color: #666;
  }
  .zhishuRank .table table tr,th,td{
    border: 1px solid #e5e5e5;
    height: 60px;
    text-align: center;
  }
  .zhishuRank .table table tbody{
    font-size: 14px;
    color: #999;
  }
  .zhishuRank .table table thead{
    background-color: #e2f8ff;
  }
  .shenduTitle{
    text-align: center;
    font-size: 16px;
    color: #666666;
  }
</style>
